<template>
  <section class="f-order-sale-detail w-card">
    <div class="title-box">
      <span class="title-text">订单ID：{{orderInfo.sysOrderId || '--'}}</span>
      <el-button v-if="orderInfo.orderStatus == 140" type="primary" plain @click="off.dialog = true">审核</el-button>
    </div>

    <div class="f-card">
      <ul class="f-ul">
        <li>
          <p>下单时间：</p>
          <p>{{ getDateTime(orderInfo.createTime)[6] || '--'}}</p>
        </li>
        <li>
          <p>代理商：</p>
          <p>{{orderInfo.shopName || '--'}}</p>
        </li>
        <li>
          <p>商品名称：</p>
          <p>{{orderInfo.goodsName || '--'}}</p>
        </li>
        <li>
          <p>支付金额：</p>
          <p style="color:#F60000">¥ {{orderInfo.payMoney/100 || '--'}}</p>
        </li>
        <li>
          <p>支付方式：</p>
          <p>{{orderInfo.payType == 3? '支付宝': '微信'}}支付</p>
        </li>
        <li>
          <p>支付时间：</p>
          <p>{{ getDateTime(orderInfo.payTime)[6] || '--'}}</p>
        </li>
        <li>
          <p>支付流水号：</p>
          <p>{{orderInfo.payOrderId || '--'}}</p>
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">
        <span>审核信息</span>
      </p>
      <ul class="f-ul">
        <li>
          <p>订单状态：</p>
          <p>{{ orderStatus[orderInfo.orderStatus] || '--'}}</p>
        </li>
        <template v-if="orderInfo.orderStatus == 160">
          <li>
            <p>失败原因：</p>
            <p>{{ orderInfo.reason }}</p>
          </li>
          <li>
            <p>退款ID：</p>
            <p>{{ orderInfo.refundId }}</p>
          </li>
          <li>
            <p>退款状态：</p>
            <p>{{ refundState[orderInfo.refundState] }}</p>
          </li>
          <li>
            <p>退款时间：</p>
            <p>{{ getDateTime(orderInfo.refundTime)[6] }}</p>
          </li>
        </template>

        <template v-if="orderInfo.orderStatus == 150">
          <li>
            <p>保单号：</p>
            <p>{{ orderInfo.thirdOrderId }}</p>
          </li>
          <li>
            <p>投保时间：</p>
            <p>{{ getDateTime(orderInfo.operationTime)[6] }}</p>
          </li>
          <li>
            <p>生效时间：</p>
            <p>{{ getDateTime(orderInfo.effectiveTime)[6] }}</p>
          </li>
        </template>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">
        <span>车辆信息</span>
      </p>
      <ul class="f-ul">
        <li>
          <p>车辆模型：</p>
          <p>{{vehicleLicenseForm.frontInfo?.model || '--'}}</p>
        </li>
        <li>
          <p>车辆类型：</p>
          <p>{{vehicleLicenseForm.frontInfo?.vehicleType || '--'}}</p>
        </li>
        <li>
          <p>车牌号码：</p>
          <p>{{orderInfo.carNumber || '--'}}</p>
        </li>
        <li>
          <p>车架号：</p>
          <p>{{orderInfo.carFrameNumber || '--'}}</p>
        </li>
        <li>
          <p>使用性质：</p>
          <p>{{orderInfo.useNature || '--'}}</p>
        </li>
        <li>
          <p>行车证编码：</p>
          <p>{{orderInfo.vehicleLicense || '--'}}</p>
        </li>
        <li>
          <p>使用年限：</p>
          <p>{{orderInfo.years || '--'}} 年</p>
        </li>
        <li>
          <p>发票金额：</p>
          <p class="f-weight-bold">{{ toThousands(orderInfo.purchase) || '--'}} 元</p>
        </li>
        <li>
          <p>行驶证正面：</p>
          <el-image style="width: 120px; height: 80px" :src="vehicleLicenseForm.frontUrl" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" fit="cover" :preview-src-list="[vehicleLicenseForm.frontUrl]" preview-teleported />
        </li>
        <li>
          <p>行驶证背面：</p>
          <el-image style="width: 120px; height: 80px" :src="vehicleLicenseForm.backUrl" :zoom-rate="1.2" :max-scale="7"
            :min-scale="0.2" fit="cover" :preview-src-list="[vehicleLicenseForm.backUrl]" preview-teleported />
        </li>
      </ul>
    </div>

    <div class="f-card">
      <p class="f-title">
        <span>投保人信息</span>
      </p>
      <ul class="f-ul">
        <li>
          <p>投保人姓名：</p>
          <p>{{orderInfo.idcardName || '--'}}</p>
        </li>
        <li>
          <p>证件号码：</p>
          <p>{{orderInfo.idcardNum || '--'}}</p>
        </li>
        <li>
          <p>联系电话：</p>
          <p>{{orderInfo.phone || '--'}}</p>
        </li>
        <li>
          <p>保障年限：</p>
          <p>{{orderInfo.serviceYears}}年</p>
        </li>
        <li>
          <p>身份证正面：</p>
          <el-image style="width: 120px; height: 80px" :src="idCardForm.frontUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
            fit="cover" :preview-src-list="[idCardForm.frontUrl]" preview-teleported />
        </li>
        <li>
          <p>身份证背面：</p>
          <el-image style="width: 120px; height: 80px" :src="idCardForm.backUrl" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
            fit="cover" :preview-src-list="[idCardForm.backUrl]" preview-teleported />
        </li>
      </ul>
    </div>

    <el-dialog title="审核订单" v-model="off.dialog" :draggable="true" width="600" @close="dialogClose">
      <el-form :model="dialogForm" :rules="dialogRules" ref="dialogFormRef">
        <el-form-item prop="check" label="投保结果">
          <el-select v-model="dialogForm.check" style="width: 400px;">
            <el-option label="成功" :value="150" />
            <el-option label="失败" :value="160" />
          </el-select>
        </el-form-item>
        <template v-if="dialogForm.check == 150">
          <el-form-item prop="effectiveTime" label="保单生效时间">
            <el-date-picker v-model="dialogForm.effectiveTime" type="datetime" value-format="x" placeholder="请选择"
              style="width: 400px !important;" />
          </el-form-item>
          <el-form-item prop="thirdOrderId" label="第三方保单号">
            <el-input v-model="dialogForm.thirdOrderId" placeholder="请输入" style="width: 400px !important;" />
          </el-form-item>
          <el-form-item prop="operationTime" label="第三方投保时间">
            <el-date-picker v-model="dialogForm.operationTime" type="datetime" value-format="x" placeholder="请选择"
              style="width: 400px !important;" />
          </el-form-item>
        </template>
        <el-form-item prop="reason" v-if="dialogForm.check == 160" label="失败原因">
          <el-input type="textarea" placeholder="请输入" v-model="dialogForm.reason" style="width: 400px !important;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="off.dialog = false">取消</el-button>
          <el-button type="primary" @click="submitHandle">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </section>
</template>

<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStateStore } from '@/store'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, toThousands } from '@/utils/utils'
import api from '../api.js'

export default {
  setup(props, context) {
    const store = useStateStore()

    const router = useRouter()
    const route = useRoute();

    const dialogFormRef = ref()

    const state = reactive({
      off: {
        dialog: false,
      },
      sysOrderId: route.query.sysOrderId,
      orderInfo: {},

      orderStatus: {
        '5': '待支付',
        '10': '已支付',
        '20': '待发货',
        '30': '已发货',
        '40': '已收货',
        '41': '拒收',
        '100': '异常待处理',
        '110': '超时关闭',
        '120': '订单关闭',
        '130': '已退货',
        '140': '待审核',
        '150': '投保成功',
        '160': '审核失败',
      },
      discountLevel: {
        '0': '免费',
        '1': '高折扣',
        '2': '低折扣',
        '3': '全价',
      },

      refundState: {
        '1': '退款成功',
        '2': '退款失败',
        '3': '待退款'
      },

      goodsForm: {},
      vehicleLicenseForm: {},
      idCardForm: {},

      dialogForm: {},
      dialogRules: {
        check: [
          { required: true, message: '请选择投保结果', trigger: 'change' },
        ],
        effectiveTime: [
          { required: true, message: '请选择保单生效时间', trigger: 'change' },
        ],
        operationTime: [
          { required: true, message: '请选择第三方投保时间', trigger: 'change' },
        ],
        thirdOrderId: [
          { required: true, message: '请输入第三方保单号', trigger: 'blur' },
        ],
        reason: [
          { required: true, message: '请输入失败原因', trigger: 'blur' },
        ],
      }
    })

    onMounted(() => {
      getOrderSelfDetail()
    })

    const getOrderSelfDetail = () => {
      let json = {
        sysOrderId: state.sysOrderId
      }
      api.orderSelfDetail(json).then(res => {
        state.orderInfo = res.data
        getVehicleLicenseInfo()
        getIdCardInfo()
      })
    }

    const getDetail = () => {
      let json = {
        productId: state.orderInfo.goodsId
      }
      api.goodsDetail(json).then(res => {
        state.goodsForm = res.data
      })
    }

    const getVehicleLicenseInfo = () => {
      let json = {
        sysOrderId: state.orderInfo.sysOrderId
      }
      api.vehicleLicenseInfo(json).then(res => {
        state.vehicleLicenseForm = res.data
      })
    }

    const getIdCardInfo = () => {
      let json = {
        sysOrderId: state.orderInfo.sysOrderId
      }
      api.idCardInfo(json).then(res => {
        state.idCardForm = res.data
      })
    }

    const dialogClose = () => {
      state.dialogForm = {}
      state.off.dialog = false
      dialogFormRef.value.resetFields()
    }

    const submitHandle = () => {
      dialogFormRef.value.validate((valid, fields) => {
        if (valid) {
          let json = JSON.parse(JSON.stringify(state.dialogForm))
          json.sysOrderId = state.orderInfo.sysOrderId
          api.orderCheck(json).then(res => {
            dialogClose()
            successDeal('操作成功')
            getOrderSelfDetail()
          })
        }
      })
    }

    return {
      ...toRefs(state),
      dialogFormRef,
      getDateTime,
      toThousands,
      dialogClose,
      submitHandle
    }
  }
}
</script>

<style lang='scss' scoped>
.f-order-sale-detail {
  box-sizing: border-box;
  padding: 20px;

  > .title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    > .title-text {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .f-card {
    background: #f1f4f6;
    border-radius: 6px;
    padding: 20px;
    margin-top: 18px;
    .f-title {
      font-weight: 400;
      font-size: 16px;
      color: #000000;
      margin-bottom: 25px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .f-ul {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 15px 0;
      li {
        display: flex;
        align-items: center;
        width: 50%;
        font-weight: 300;
        font-size: 14px;
        color: #000000;
        p:first-child {
          color: #424242;
          width: 85px;
          text-align: right;
        }
        .f-weight-bold {
          font-weight: bold;
        }
      }
    }
    .f-goods-box {
      display: flex;
      align-items: center;
      .f-goods {
        width: 50%;
        .f-goods-card {
          width: 448px;
          padding: 8px 10px;
          background: #ffffff;
          display: flex;
          img {
            width: 152px;
            height: 84px;
            margin-right: 15px;
          }
          .f-desc-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .f-desc-name {
              font-weight: 600;
              font-size: 16px;
              color: #010101;
            }
            .f-desc-price {
              font-weight: 400;
              font-size: 20px;
              color: #f60000;
            }
            .f-desc-price-1 {
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              text-decoration-line: line-through;
              margin-left: 10px;
            }
          }
        }
      }
      .f-goods-ul {
        li {
          width: 100%;
        }
      }
    }
  }
}
</style>